<template>
    <el-container>
        <el-header>
            <div class="right-panel-search">
                <div class="search-input">设备名称</div>
                <el-input v-model="search.device_name" placeholder="请输入设备名称" @click="openDev" readonly></el-input>
                <el-date-picker v-model="search.time" :value-format="'YYYY-MM'" type="month" placeholder="请选择月份" />
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <el-card shadow="never" class="data_card_mid_right" >
                <div style="display:flex;width:100%">
                    <div style="width:20%">
                        <scEcharts height="300px" :option="options"></scEcharts>
                    </div>
                    <div style="width:80%">
                        <scEcharts height="300px" :option="option"></scEcharts>
                    </div>
                </div>
            </el-card>
            <scTable ref="table" :data="detail.item" stripe border height="420">
                <el-table-column fixed label="设备名称" prop="title" align="center" width="150"></el-table-column>
                <el-table-column v-for="(item,index) in detail.table" :key="index" :label="item.value" align="center">
                    <template #default="{row}">
                        <div>{{row[item.field]}}</div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="平均值" prop="average_all" align="center"></el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <device-list v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></device-list>
</template>

<script>
import scEcharts from "@/components/scEcharts";
import deviceList from '@/views/device/deviceList.vue'
    export default {
        components: {scEcharts,deviceList },
        data() {
            return {
                mainData:this.$API.jiankong.equTable,
                groupId:"0",
                option : {
                    label: {
                        show: true,
                        position: 'center',
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [],
                            type: 'line',
                            areaStyle: {},
                            name: 'Fake Data',
                        }
                    ]
                },
                options : {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['60%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                position: 'center',
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 20,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [{
                                value: "",
                                name: '设备利用率',
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: '{a|{b}}\n{br|}\n{c}%',
                                        rich: {
                                            a: {
                                                fontSize: 18,
                                                color: '#333',
                                                lineHeight: 20
                                            },
                                            hr: {
                                                borderColor: '#aaa',
                                                width: '100%',
                                                borderWidth: 0.7,
                                                height: 0,
                                            },
                                            c: {
                                                color: '#000',
                                                fontSize: 20,
                                                lineHeight: 30
                                            },
                                        }
                                    }
                                }
                            }]
                        }
                    ],
                },
                search:{
                    device_name:null,
                    time:null,
                    device_id:null
                },
                dialog:{
                    save:false
                },
                detail:{},
            }
        },
        mounted () {
            this.month()
            this.upsearch()
        },
        methods: {
            month(){
                var currentDate = new Date();
                var currentYear = currentDate.getFullYear();
                var currentMonth = currentDate.getMonth() + 1; // 月份从 0 开始，所以要加 1
                this.search.time = currentYear + '-' + (currentMonth < 10 ? '0' : '') + currentMonth;
                var monthData = [];
                if(currentMonth === 1 || currentMonth === 3 || currentMonth === 5 || currentMonth === 7 || currentMonth === 8 || currentMonth === 10 || currentMonth === 12){
                    for (var i = 1; i <= 31; i++) {
                        var tenDay = this.dayS(i)
                        var yes = tenDay;
                        monthData.push({ date: yes});
                    }
                }else{
                    for (var a = 1; a <= 30; a++) {
                        var dayTen = this.dayS(a)
                        var no = dayTen;
                        monthData.push({ date: no});
                    }
                }
                this.monthList  = monthData
            },
            dayS(number){
                if (number < 10) {
                    return "0" + number;
                } else {
                    return number.toString();
                }
            },
            // 选择设备
            openDev(){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('add')
                })
            },
            handleSuccess(data) {
                this.search.device_name = data[0].title
                this.search.device_id = data[0].id
                this.upsearch()
            },
            async upsearch(){
                let query = {
                    month:this.search.time,
                    device_id:this.search.device_id,
                    type:1
                }
                var res = await this.$API.jiankong.equTable.post(query);
                this.detail = res.data
                let lineName = []
                let lineNumber = []
                res.data.line.title.map(item=>{
                    lineName.push(item)
                })
                res.data.line.value.map(item=>{
                    lineNumber.push(item)
                })
                this.option.xAxis.data = lineName
                this.option.series[0].data = lineNumber
                this.options.series[0].data[0].value = res.data.circular
            },
        },
    }
</script>

<style lang="scss" scoped>
</style>